<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<polymer-element name="cr-toolbar" noscript>
    <template>
        <style>
            :host {
                display: -webkit-flex;
                display: flex;
                /*
                    Use padding on the bottom so the margin doesn't overflow
                    when the toolbar is the last thing, and use margin on the
                    top so it collapses with sections before the toolbar.
                */
                /* TODO(esprehn): Can we do this simpler? */
                padding-bottom: 1em;
                margin: 1em 16px 0 16px;
                flex-wrap: wrap;
                -webkit-flex-wrap: wrap;
                align-items: center;
                -webkit-align-items: center;
            }

            @media (max-width: 600px) {
                :host {
                    margin: 1em 8px 0 8px;
                }
            }
        </style>
        <content></content>
    </template>
</polymer-element>
